/**
 * Icon 图标
 * 可以选择 svg iconfont字体 或者使用图片 png
 */
import * as React from "react";
import { IconPropsType, typeProps } from "./PropsType";
import classnames from "classnames";
import "./index.less";
export const typeProp = typeProps;

function Icon(props: IconPropsType) {
  const {
    className,
    iconName,
    type = "icon",
    size = "s",
    children,
    style = {},
  } = props;
  const cls = classnames("m-react-icon", className, iconName, `size-${size}`);
  const CDN_PREFIX =
    type === typeProps.img && require(`../../img/icon/${iconName}.png`).default;
  //根据type render出结构
  const renderType = () => {
    switch (type) {
      case "icon":
        return (
          <div className={`iconfont ${cls}`} style={{ ...style ,display:'inline-block'}}>
            {children}
          </div>
        );
      case "img":
        return (
          <div className={`${cls}`} style={{display:'inline-block' }} >
            <img className="m-react-icon-img" src={CDN_PREFIX} alt="" style={{ ...style }} />
            {children}
          </div>
        );
      default:
        return (
          <div className={`iconfont ${cls}`} style={{ ...style,display:'inline-block' }}>
            {children}
          </div>
        );
    }
  };
  return <>{renderType()}</>;
}
export default Icon;
